<style lang="scss" scoped>
.list {
  height: 20vh;
  padding: 10px;

  div {
    margin: 5px;
  }

  dl {
    display: flex;
    padding: 10px;

    dt {
      width: 50px;
      height: 100px;

      img {
        width: 50px;
        height: 50px;
      }

      margin: 0 10px;
    }

    dd {
      .name {
        font-size: 20px;
        font-weight: 800;
      }
    }
  }
}

.box {
  width: 100vw;
  height: 80vh;
  display: flex;
  color: #000;
  font-size: 14px;
  overflow: auto;

  .left1 {
    width: 200px;
    background-color: rgb(247, 248, 250);
    height: 100vh;
    overflow-y: scroll;

    li {
      line-height: 50px;
      padding: 0 10px;
    }

    .active {
      border-left: 3px solid rgb(30, 111, 255);
      background-color: #fff;
      color: #000;
    }
  }

  .right1 {
    flex: 1;
    height: 100vh;
    overflow-y: scroll;

    li {
      line-height: 50px;
      padding: 0 10px;
    }

    .active1 {
      color: rgb(30, 111, 255);
    }
  }
}
</style>

<template>
  <van-nav-bar v-if="v" :title="v[0].nosocomium" left-arrow @click-left="$router.back()" />
  <div class="list" @click="handDetail(v)" v-if="v">
    <dl>
      <dt>
        <img :src="v[0].socoimage" alt="" />
      </dt>
      <dd>
        <div class="name">{{ v[0].nosocomium }}</div>
        <div>
          <van-tag plain type="success" style="margin: 0 5px">{{
            v[0].socostate
          }}</van-tag>
          <van-tag plain type="success">{{ v[0].socolv }}</van-tag>
        </div>
        <div style="font-size: 16px">地址：{{ v[0].sococity }}</div>
      </dd>
      <div style="font-size: 30px; position: absolute; right: 10px; top: 80px">
        >
      </div>
    </dl>
  </div>
  <div style="width: 100%; height: 40px; background: #ccc; padding: 5px">
    <h2>科室列表</h2>
  </div>
  <div class="box">
    <div class="left1">
      <li v-for="(v, i) in KeshiTap" :key="i" @click="headeTap(v, i)" :class="cunter === i ? 'active' : ''">
        {{ v }}
      </li>
    </div>
    <div class="right1">
      <li v-for="(v, i) in KeShi" :key="i" @click="headeTap1(v, i)" :class="cunter1 === i ? 'active1' : ''">
        {{ v }}
      </li>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import type { ListDatagete } from '@/Type/indeType'
import axios from 'axios'
import { showToast } from 'vant'
import { useRoute, useRouter } from 'vue-router'

import type { doctorState } from '@/interface'
const route = useRoute()
const router = useRouter()
const id = route.params.id
const v = ref()
const yy = ref()
const ListData = ref<ListDatagete[]>([])
const getDetailData = async () => {
  const res = await axios.get('/api/nosocomium/detail', { params: { id: id } })
  v.value = res.data.data
  console.log(v.value)

  yy.value = res.data.data[0]
}
getDetailData()

const handDetail = (v: doctorState) => {
  router.push({
    path: `/RDetail/${id}`,
  })
}

const pageCode = ref(1)
const pageSize = ref(10)

const tapslist = ref('')
const getData = () => {
  axios
    .get('/api/doctor/list', {
      params: {
        pageCode: pageCode.value,
        pageSize: pageSize.value,
        admin: tapslist.value,
      },
    })
    .then(res => {
      ListData.value = [...res.data.data, ...ListData.value]
    })
}
getData()
const doctorList = (item: ListDatagete) => {
  router.push('/doctordetail?id=' + item.doctorid)
}
const show = ref(false)
// const show1 = ref(false)
// const showKe = ref(true)

const onSelect = (item: any) => {
  show.value = false
  showToast(item.name)
}

const KeshiTap = ref([])
const KeShi = ref([])
const TextTap = ref('')
const cunter = ref(0)
const cunter1 = ref(-1)
axios.get('/api/office/list').then(res => {
  res.data.data.forEach(
    (item: { adminname: string; adminchildrenname: string }) => {
      KeshiTap.value.push(item.adminname as never)
      KeshiTap.value = [...new Set(KeshiTap.value)].reverse()
      if (item.adminname === '全部') {
        KeShi.value.push(item.adminchildrenname as never)
      }
    },
  )
})
const headeTap = (v: string, index: number) => {
  TextTap.value = v
  cunter.value = index
  axios.get('/api/office/list').then(res => {
    KeShi.value = []
    res.data.data.forEach(
      (item: { adminname: string; adminchildrenname: string }) => {
        if (item.adminname === v) {
          KeShi.value.push(item.adminchildrenname as never)
        }
      },
    )
  })
}
const headeTap1 = (v: string, index: number) => {
  tapslist.value = v
  cunter1.value = index
  router.push(`/KSDetail/${v}`)

}
watch(tapslist, () => {
  getData()
})
</script>
